/*
 * @Descripttion: $0
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 01:26:12
 * @LastEditTime: 2019-10-29 13:43:52
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import NavigationUtil from '../navigator/NavigationUtil'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';

const CITY_NAMES = ['北京','上海','深圳','重庆','山东','山西','河北','河南']
export default class FlatListPage extends React.Component{
  constructor(props){
    super(props)
    this.canLoadMore = false
    this.state={
      isLoading:false,
      dataArray:CITY_NAMES
    }
  }
  loadData(refreshing){
    if(refreshing){
      this.setState({
        isLoading:true
      })
    }

    setTimeout(()=>{
      let tempArray = []
      if(refreshing){
        tempArray =CITY_NAMES.reverse()
      }else{
        tempArray = this.state.dataArray.concat(CITY_NAMES)
      }
      this.setState({
        dataArray:tempArray,
        isLoading:false,
      })
    },2000)
  }
  _renderItem(data){
    return <View style={styles.itemBox}>
      <Text style={styles.itemText}>{data.item}</Text>
    </View>
  }
  _genIndicator(){
    return <View style={styles.indicatorWarp}>
      <ActivityIndicator
        size = {'large'}
        animating = {true}
      />
      <Text  style={styles.indicatorText}>正在加载</Text>
    </View>
  }
  render(){
    
    return (
      
      <View style={styles.sectionContainer}>

        <FlatList
          data = {this.state.dataArray}
          renderItem = {data => this._renderItem(data)}

          refreshControl = {
            <RefreshControl
              title={'Loading'}
              colors={['red']}
              tintColor = {'orange'} //ios
              titleColor = {'orange'} //ios
              refreshing = {this.state.isLoading}
              onRefresh = {()=>{
                this.loadData(true)
              }}
            />
          }
          
          ListFooterComponent = {()=>this._genIndicator()}
          // onEndReached={()=>this.loadData(false)}
          onEndReached={()=>{
            console.log('---onEndReached----');
            setTimeout(()=>{
              
              if (this.canLoadMore) {//fix 滚动时两次调用onEndReached https://github.com/facebook/react-native/issues/14015
                this.loadData(false);
                this.canLoadMore = false;
              }
            },100)
            }} 
          onEndReachedThreshold={0.5} 
          onMomentumScrollBegin={() => {
            this.canLoadMore = true; //fix 初始化时页调用onEndReached的问题
            console.log('---onMomentumScrollBegin-----')
           }}
        />
      </View>
    )
  }
 
};

const styles = StyleSheet.create({

  sectionContainer: {
  //  marginBottom: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color:'#333',
  },
  itemBox:{
    flex:1,
    backgroundColor:'#678',
    marginBottom:10,
    height:200,
    justifyContent:'center',

  },
  itemText:{

    color:'#fff',
    textAlign:'center',
 
    
  },
  indicatorWarp:{
    alignItems:'center'
  },
  indicatorText:{
    margin:10
  }
 
});


